<template>
	<view class="list-box">
		<!-- 标题 -->
		<list-box :name="name" :word="word" style="margin-top:60rpx;">
			<!-- 滑块内容 -->
			<swiper class="list-swiper" next-margin="30rpx" :style="{height:`${200*rows}rpx`}">
				<swiper-item v-for="
			 (n,index) in column" :key="index">
					<course-item v-for="(item,i) in courseData.slice(index*rows,(index+1)*rows)" :key="i" :item="item">
					</course-item>
					<!-- <course-item v-for="(item,i) in courseData" :key="i" :item="item"></course-item> -->
				</swiper-item>
			</swiper>
		</list-box>
	</view>
</template>

<script>
	import courseItem from "@/components/common/course-item.vue"
	import courseData from "@/mock/courseData.js"
	import listBox from "./list-box.vue"

	export default {
		components: {
			courseItem,
			listBox
		},
		props: {
			name: { // 名称
				type: String,
				default: '热门推荐'
			},
			word: { // 高亮单词，如： 'HOT'
				type: String,
				default: null
			},
			column: { // 默认2列
				type: Number,
				default: 2
			},
			rows: { // 默认4行
				type: Number,
				default: 4
			},
			courseData: {
				type: Array,
				default: () => courseData
			}
		},
	}
</script>

<style lang="scss">
</style>
